import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import './index.less';


class ButtonArray extends PureComponent {

  static propTypes = {
    data: PropTypes.array,
    size: PropTypes.string
  };

  initStyle = (size, display) => {
    let paddingStyle = {};
    switch (size) {
    case 'small':
      paddingStyle = {
        padding: '6px 14px'
      };
      break;
    case 'middle':
      paddingStyle = {
        padding: '9px 16px'
      };
      break;
    case 'large':
      paddingStyle = {
        padding: '11px 16px'
      };
      break;
    default:
      paddingStyle = {
        padding: '9px 16px'
      };
    }
    paddingStyle.display = display
    return paddingStyle;
  }

  render () {
    const {
      data,
      size
    } = this.props;

    return (
      <>
        <ul className="diyArrayButton">
          {
            data.map((item, index) => {
              const isLast = index === data.length - 1;
              return (
                <Fragment key={index}>
                  <button onClick={item.event} type="button" style={this.initStyle(size, item.display)}
                    className={`iconfont ${item.icon}`}>{item.name}</button>
                  {
                    !isLast ? (<span/>) : ''
                  }
                </Fragment>
              );
            })
          }
        </ul>
      </>
    );
  }
}

export default ButtonArray;
